<template>
  <div class="haloe-page__title">共{{total}}条记录</div>
  <div class="haloe-page__opts">
    每页显示<e-select v-model="currentPageSize" :options="pageSizeOpts" @on-change="changeSize">
      <e-option
        v-for="item in pageSizeOpts"
        :value="item"
        :key="item"
      >{{ item }}</e-option>
    </e-select>条
  </div>
</template>

<script setup>
import { ref, defineProps,defineEmits,toRefs,watch } from 'vue'
import eSelect from '../select'

const props = defineProps({
  total: { //总数据行数
    type: Number
  },
  pageSize: { // 每页显示数量
    type: Number,
    default: 10
  },
  pageSizeOpts:{ // 用户配置每页条数切换
    type:Array,
    default: ()=> [10,20,30,40]
  },
})

// 事件注册
const emits = defineEmits(['on-size'])

const {pageSize,pageSizeOpts} = toRefs(props)

//当前每页显示数量
let currentPageSize = ref(pageSize.value)

//监听用户选择变化
watch(pageSize,(value)=>{
  currentPageSize.value = value
})

// 修改pageSize事件回调函数
function changeSize(){
  emits('on-size', currentPageSize.value);
}

</script>
